<template>
  <div class="app-container">
    <div v-for="(item,index) in list" :key="index" style="margin-bottom: 24px">
      <el-card>
        <div class="reward-item">
          <div class="reward-left">
            <div class="reward-item-cell" v-if="item.id == 1 || item.id == 2">{{item.roleName}}</div>
            <div class="reward-item-cell" v-else>
              <el-select v-model="item.roleId" placeholder="请选择">
                <el-option v-for="role in roleList" :key="role.id" :label="role.roleName" :value="role.id"> </el-option>
              </el-select>
            </div>
            <div class="reward-item-cell" v-if="item.id == 1 || item.id == 2">分佣奖励</div>
            <div class="reward-item-cell" v-else>平级奖励</div>
            <div class="reward-item-cell" v-if="item.id != 1 && item.id != 2">
              <div v-for="good in item.rewardGoodsList" :key="good.id" style="width: 260px;display: inline-block;">
                <div style="display: flex;align-items: center">
                  <div style="width: 100px;text-align: right;padding-right: 12px">{{good.goodsName}}</div>
                  <div>
                    <el-input v-model="good.price" placeholder="请输入金额" size="small" style="width: 160px">
                      <template slot="prepend">￥</template>
                    </el-input>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <el-input v-model="item.price" placeholder="请输入金额" size="small" style="width: 160px">
                <template slot="prepend">￥</template>
              </el-input>
            </div>
          </div>
          <div class="reward-right" v-show="item.id != 1 && item.id != 2">
            <el-button size="small" @click="deleteList(index)">删除</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <div class="add-role"><span @click="addList">新增角色规则</span></div>
    <div class="save-button-box">
      <div class="save-button" @click="submit">
        保存设置
      </div>
    </div>
  </div>
</template>
<script>
import {addReward, getRoleData, listReward} from "@/api/system/reward";
import {isValidAmount} from "@/utils/ruoyi";

export default {
  name: "",
  data() {
    return {
      list: [],
      roleList: [],
    };
  },
  created() {
    this.getList();
    this.getRoleList();
  },
  methods: {
    deleteList(index){
      this.$confirm("确定删除该规则?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.list.splice(index, 1)
      })
    },
    addList() {
      this.list.push({
        roleId: "",
        price: ""
      })
    },
    submit() {
      //校验角色id不能为空 和金额不能为空
      for (let i = 0; i < this.list.length; i++) {
        if (!this.list[i].roleId && this.list[i].id != 1 && this.list[i].id != 2) {
          this.$message({
            type: "warning",
            message: `请选择第${i + 1}行角色!`,
          });
          return;
        }
        //同一个角色只能设置一个规则
        for (let i = 0; i < this.list.length; i++) {
          for (let j = i + 1; j < this.list.length; j++) {
            if (this.list[i].roleId == this.list[j].roleId) {
              this.$message({
                type: "warning",
                message: `第${i + 1}行角色只能设置一个规则!`,
              });
              return;
            }
          }
        }
      }
      for (let i = 0; i < this.list.length; i++) {
        let item = this.list[i];
        if(item.rewardGoodsList){
          for (let j = 0; j < item.rewardGoodsList.length; j++) {
            if (!item.rewardGoodsList[j].price) {
              this.$message({
                type: "warning",
                message: `第${i + 1}行第${j + 1}个商品金额不能为空!`,
              });
              return;
            }
            if (!isValidAmount(item.rewardGoodsList[j].price)) {
              this.$message({
                type: "warning",
                message: `第${i + 1}行第${j + 1}个商品金额格式不正确!`,
              });
              return;
            }
          }
        }
      }
        addReward(this.list).then(res => {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        })
    },
    getRoleList() {
      getRoleData().then(res => {
        this.roleList = res.data
      })
    },
    getList() {
      listReward().then(response => {
        this.list = response.rows;
      })
    },
  },
}
</script>


<style>
.add-role {
  color: blue;
  text-decoration: underline;
  text-align: center;
  margin: 24px 0;
}

.add-role span {
  cursor: pointer;
}

.reward-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reward-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.reward-item-cell {
  margin-right: 24px;
  font-size: 14px;
}

.save-button-box {
  display: flex;
  align-items: center;
  justify-content: center
}

.save-button {
  margin: 24px auto;
  display: inline-block;
  border: 1px solid #ccc;
  padding: 6px 32px;
  font-size: 14px;
  cursor: pointer;
}
</style>
